<template>
	<Page>
		<Topbar ref="topbar" active="设备绑定" hideMenu />
		<Content>
			<Panel header headerBorder title="设备绑定" style="padding: 5rem;">
				<template #toolbar>
					<view class="back" @click="back" v-if="!isFirstLogin">
						<u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon> 返回
					</view>
				</template>
				<view class="container">
					<view class="loading" v-if="loading">
						<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
					</view>
					<view class="tab_box">
						<view>
							<view :class="['tab_btn', activeIndex == index?'active':'lazy']"
								v-for="(item, index) in list1" @click="tabClick(index)">
								{{ item.workShopName }}
							</view>
						</view>
					</view>
					<view class="content_box">
						<view class="content">
							<view class="card" v-for="(item, index) in list2" :key="index" @click="click(item)">
								<view class="top">
									<image :src="iconSrc" mode="aspectFit" />
									<view class="right">
										<view class="info1">
											{{ item.deviceNo }}
										</view>
										<view class="info2">
											工序：{{ item.manufacturingProcess || '--'}}
										</view>
									</view>
								</view>
								<view class="body">
									<view class="col1">
										<view class="info1">
											品牌
										</view>
										<view class="info2">
											{{ item.brand }}
										</view>
									</view>
									<view class="col2">
										<view class="info1">
											型号
										</view>
										<view class="info2">
											{{ item.deviceSpec }}
										</view>
									</view>
									<view class="col3">
										<view class="info1">
											吨位
										</view>
										<view class="info2">
											{{ item.deviceWeight }}T
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="pagination">
							<page-pagination :total="total" :pageSize="pageSize" :currentPage="currentPage"
								@change="change"></page-pagination>
						</view>
					</view>
				</view>
			</Panel>
		</Content>
		<Modal :title="`您确认要绑定吗？`" ref="popup" @confirm="confirm">
			<view style="display: flex; justify-content: center; align-items: center;">
				{{ selectedItem.deviceNo }}
			</view>
		</Modal>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Modal from '@/components/modal/index.vue';
	import {
		setDevice,
		getDevice
	} from "@/store/user.js";
	import fetch from "@/utils/fetch";
	import iconSrc from './img/i.png';

	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			Modal
		},
		data() {
			return {
				isFirstLogin: !getDevice(),
				iconSrc,
				activeIndex: 0,
				list1: [],
				list2: [],
				loading: false,
				total: 0,
				pageSize: 24,
				currentPage: 1,
				selectedItem: {}
			}
		},
		methods: {
			back() {
				this.goto('/pages/home/index');
			},
			goto(url) {
				uni.navigateTo({
					url,
					animationType: "pop-in",
					animationDuration: 1000,
				})
			},
			click(item) {
				this.selectedItem = item;
				this.$refs.popup.open();
			},
			tabClick(index) {
				this.activeIndex = index;
				this.workShop = this.list1[index].workShop;
				this.fetchList2(1);
			},
			fetchList2(pageCurrent) {
				this.loading = true;
				fetch('get', '/dms/mobile/selectDeviceInfoByWorkShop', {
					pageNum: pageCurrent,
					pageSize: this.pageSize,
					workShop: this.workShop,
					status: '1'
				}).then((res) => {
					this.loading = false;
					this.list2 = res.records;
					this.currentPage = res.current;
					this.total = res.total;
				});
			},
			change(current) {
				this.fetchList2(current)
			},
			confirm() {
				setDevice(this.selectedItem);
				this.$refs.topbar.updateDeviceInfo();
				this.isFirstLogin = !getDevice();
				this.$toast('绑定机台成功');
				uni.navigateTo({
					url: '/pages/home/index'
				});
			},
		},
		mounted() {
			fetch('get', '/dms/mobile/selectWorkshopByUser').then((res) => {
				this.list1 = res;
				if (this.list1.length !== 0) {
					this.workShop = this.list1[0].workShop;
					this.fetchList2(1);
				}
			})
		}
	};
</script>

<style scoped lang="scss">
	.back {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.container {
		display: flex;
		flex-direction: row;
		width: 100%;

		.loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
			z-index: 1;
		}

		.tab_box {
			display: flex;
			flex-direction: column;
			border-right: 1px solid #ccc;
			padding-right: 2rem;
			margin-right: 2rem;
			width: 27rem;
			height: 64vh;
			overflow-y: auto;


			.tab_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1rem;
				height: 8rem;
				width: 100%;
			}

			.active {
				background-color: #ecf1f5;
				color: #0076cc;
				height: 8rem;
				width: 100%;
			}
		}

		.content_box {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: 68vh !important;

			.content {
				flex: 1;
				display: none;
				animation: moving .5s ease;
				overflow-y: scroll;
				display: grid;
				grid: auto-flow / 1fr 1fr 1fr 1fr;
			}

			.active {
				display: block;
			}
		}

		.card {
			margin: 1rem;
			border-radius: 2rem;
			box-shadow: 1px 1px 8px rgba(0, 0, 0, .1);
			height: 21.2rem;
			display: flex;
			flex-direction: column;

			.top {
				display: flex;
				flex-direction: row;

				uni-image {
					width: 10rem;
					height: 10rem;
					margin-left: 2rem;
					margin-top: 2rem;
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.info1 {
						font-size: 2rem;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						width: 16rem;
					}

					.info2 {
						margin-top: 0.5rem;
						color: #70b1e2;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						width: 16rem;
					}
				}
			}

			.body {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 0 2rem;
				margin-top: 1rem;

				.col1 {
					border-right: 1px solid #ccc;
					padding-right: 1rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.col2 {
					border-right: 1px solid #ccc;
					padding-right: 1rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.col3 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.info1 {
					color: #666;
				}

				.info2 {
					color: #000;
					font-weight: bold;
					margin-top: 1rem;
					text-align: center;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 8rem;
				}
			}
		}

		.pagination {
			display: flex;
			justify-content: flex-end;
			margin-top: 4rem;
		}

		/deep/ .page-pagination {
			width: auto;

			.page-scroll-child {
				height: auto !important;
			}

			.pag-btn {
				font-size: 2rem !important;
				border: none !important;
				color: #999 !important;
				margin: 0 1rem !important;
				width: 2rem !important;
				height: 2rem !important;
				display: flex !important;
				justify-content: center !important;
				align-items: center !important;
				padding: 2rem !important;
			}

			.pag-btn.active {
				background-color: #70b1e2 !important;
				border-radius: 1rem;
			}

			.pag-btn.start,
			.pag-btn.prev,
			.pag-btn.next,
			,
			.pag-btn.end {
				border: 1px solid #ccc !important;
				border-radius: 1rem;
			}
		}
	}
</style>